<!--
 * 配置管理
 * @author luguoxiang
 * @date 2023-03-27
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <t-row :gutter="16" style="height: 100%">
    <t-col
      span="3"
      class="gl-table-container"
      style="background-color: var(--app-color-bg-primary); border-radius: var(--app-border-radius)"
    >
      <t-tree :data="tagList" hover activable :actived="selection" @active="onActive">
        <template #operations="{ node }">
          <edit-icon @click="updateRef.open(node.data)" />
          <delete-icon class="gl-ml" @click="removeTag(node)" />
        </template>
      </t-tree>
      <div class="gl-text-c">
        <t-link :underline="false" @click="updateRef.open({})">添加分组</t-link>
      </div>
    </t-col>
    <t-col span="9" class="gl-table-container">
      <lg-table :schema="schema" v-bind="tableProps">
        <!-- 工具栏 -->
        <template #toolbar-left>
          <btn-tool-add @click="userPickerRef.open()" />
          <btn-tool-remove @click="remove()" />
        </template>
        <!-- 操作栏 -->
        <template #actionbar="{ row }">
          <lg-button-list :limit="$RowBtnLimit">
            <btn-row-remove @click="remove(row.id)" />
          </lg-button-list>
        </template>
      </lg-table>
    </t-col>
  </t-row>
  <user-multiple-picker ref="userPickerRef" @ok="addUser" />
  <lg-modal ref="updateRef" v-slot="{ data }" header="分组设置" @confirm="updateTag">
    <t-form :data="data" style="height: 45px">
      <t-form-item label-width="0" name="label" :rules="rules.required('请输入名称')">
        <t-input v-model="data.label" />
      </t-form-item>
    </t-form>
  </lg-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { DeleteIcon, EditIcon } from 'tdesign-icons-vue-next';
import userTagApi from '@/api/userTag';
import schema from './schema';
import { LgButtonList, LgTable, message, notEmpty, useTable } from '@/soar';
import UserMultiplePicker from '@/pages/auth/user/Picker/MultiplePicker.vue';
import LgModal from '@/soar/components/LgModal/index.vue';
import { rules } from '@/soar/utils/validator';

const userPickerRef = ref();
const updateRef = ref();
const selection = ref([]);
const tagList = ref([]);

const { remove, reload, tableProps } = useTable<any>({
  api: {
    ...userTagApi,
    query: (params: any) => {
      params.tagId = selection.value[0];
      return userTagApi.queryUser(params);
    },
    remove: userTagApi.removeUser,
  },
  props: {
    orderBys: ['id'],
    actionbar: {
      width: 100,
    },
    immediate: false,
  },
});

function load() {
  userTagApi.list().then((res) => {
    tagList.value = res.map((x) => ({ value: x.id, label: x.name }));
    setTimeout(() => {
      onActive([tagList.value[0].value]);
    }, 500);
  });
}
load();

function onActive(e) {
  if (e.length) {
    selection.value = e;
    reload(0);
  }
}

function addUser(e) {
  userTagApi.addUser({ mainId: selection.value[0], joinIds: e.map((x) => x.id) }).then(() => {
    reload(1);
  });
}

function updateTag({ e, data, close }) {
  notEmpty(data.label, '请输入分组名称');
  userTagApi.saveOrUpdate({ id: data.value, name: data.label }).then(() => {
    load();
    close();
  });
}

function removeTag(e) {
  message.confirm(`确认删除“${e.label}”吗？`).then(() => {
    userTagApi.remove([e.value]).then(() => {
      load();
    });
  });
}
</script>
<style scoped lang="less"></style>
